<template>
	<view>
		<nav-bars title="银行名称"></nav-bars>
		<view class="SelectView" style="">
			<view class="SelectItem" @click="show = true" :style="{ color: BankName != '' ? '#C1A66C' : '#333' }">{{ BankName != '' ? BankName : '选择银行' }}</view>
			<view class="SelectItem" @click="ProvinceClick" :style="{ color: PROVINCE_CODE != '' ? '#C1A66C' : '#333' }">
				{{ PROVINCE_CODE != '' ? PROVINCE_CODE : '选择省份' }}
			</view>
			<view class="SelectItem" @click="AreaClick" :style="{ color: AREA != '' ? '#C1A66C' : '#333' }">{{ AREA != '' ? AREA : '选择地区' }}</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item, index) in BankZfCodeList" @click="ClickBank(item, index)" :key="index">{{ item.BANK_NAME }}</view>
			<view v-if="BankZfCodeList.length == 0" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
				<u-empty text="暂无数据" mode="list" icon-size="550" src="https://cos.ryz1620.com/liankun/static/nullBg.png"></u-empty>
			</view>
			<!-- <view class="bindList">
				<span>银行名称</span>
				<input type="text" disabled v-model="BankName" placeholder-class="bindC" placeholder="请选择银行名称" />
			</view>
			<view class="bindList" @click="show = true">
				<span>省份</span>
				<input type="text" disabled v-model="PROVINCE_CODE" placeholder-class="bindC" placeholder="请选择省份" />
			</view>
			<view class="bindList" @click="AreaClick">
				<span>地区</span>
				<input type="text" disabled v-model="AREA" placeholder-class="bindC" placeholder="请选择地区" />
			</view> -->
		</view>
		<u-select v-model="show" mode="single-column" :list="BankList" @confirm="BankConfirm"></u-select>
		<u-select v-model="ProvinceShow" mode="single-column" :list="ProvinceArr" @confirm="ProvinceConfirm"></u-select>
		<u-select v-model="AreaShow" mode="single-column" :list="AreaArr" @confirm="AeraConfirm"></u-select>
	</view>
</template>
<script>
import Https from '@/service/verification.js';
export default {
	name: '',
	components: {},
	data() {
		return {
			show: false,
			BankCode: '', //银行编码
			BankName: '',
			BankList: [],

			PROVINCE_CODE: '', //省份（传AREA参数时此参数必传）
			AREA: '', //地区（传PROVINCE_CODE时返回）

			ProvinceShow: false,
			ProvinceArr: [],
			AreaShow: false,
			AreaArr: [],
			BankZfCodeList: []
		};
	},
	onLoad(options) {
		// console.log(options);
		// this.BankCode = options.BankCode;
		// this.BankName = options.BankName;
		this.GetBankNameList();
	},
	onShow() {},
	methods: {
		GetBankNameList() {
			var that = this;
			let params = {};
			Https.GetBankName(params).then(res => {
				if (res.code == 1) {
					console.log(res.data);
					var data = res.data;
					if (data.length > 0) {
						data.forEach((item, index) => {
							item.label = item.BAF_NAME;
							item.value = item.BANKCODE;
						});
						that.BankList = data;
					} else {
						that.BankList = [];
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		BankConfirm(e) {
			var that = this;
			// console.log(e);
			that.BankCode = e[0].value; //银行编码
			that.BankName = e[0].label;

			(that.PROVINCE_CODE = ''), //省份（传AREA参数时此参数必传）
				(that.AREA = ''), //地区（传PROVINCE_CODE时返回）
				(that.ProvinceArr = []),
				(that.AreaArr = []),
				that.GetBankZhInfoList();
		},
		AeraConfirm(e) {
			var that = this;
			that.AREA = e[0].value;
			that.GetBankZhInfoList();
			// console.log(e);
		},
		AreaClick() {
			var that = this;
			if (that.PROVINCE_CODE != '') {
				that.AreaShow = true;
			} else {
				uni.showToast({
					title: '请先选择省份',
					icon: 'none',
					duration: 2000
				});
			}
		},
		ProvinceClick() {
			var that = this;
			if (that.BankCode != '') {
				that.ProvinceShow = true;
			} else {
				uni.showToast({
					title: '请先选择银行',
					icon: 'none',
					duration: 2000
				});
			}
		},
		ProvinceConfirm(e) {
			var that = this;
			// console.log(e);
			that.PROVINCE_CODE = e[0].value;
			that.GetBankZhInfoList();
		},
		GetBankZhInfoList() {
			var that = this;
			let params = {
				BANKCODE: that.BankCode,
				PROVINCE_CODE: that.PROVINCE_CODE,
				AREA: that.AREA
			};
			Https.GetBankZhInfo(params).then(res => {
				if (res.code == 1) {
					console.log(res.data);
					var PROVINCE = res.data.PROVINCE;
					var AREA = res.data.AREA;
					var BANKLIST = res.data.BANKLIST;
					if (PROVINCE.length > 0) {
						PROVINCE.forEach((item, index) => {
							item.label = item.PROVINCE_CODE;
							item.value = item.PROVINCE_CODE;
						});
						that.ProvinceArr = PROVINCE;
					} else {
						that.ProvinceArr = [];
					}
					if (AREA) {
						AREA.forEach((item, index) => {
							item.label = item.AREA;
							item.value = item.AREA;
						});
						that.AreaArr = AREA;
					} else {
						that.AreaArr = [];
					}
					if (BANKLIST) {
						that.BankZfCodeList = BANKLIST;
					} else {
						that.BankZfCodeList = [];
					}
					// var data = res.data;
					// that.BankList = data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		ClickBank(row, index) {
			var that = this;
			console.log(row);
			let nowInfo = {
				BankCode: that.BankCode,
				BankName: that.BankName,
				zhihang: row
			};
			console.log(nowInfo, '+++++');
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			console.log(prevPage);
			prevPage.$vm.zhiHangInfo = nowInfo;
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>
<style lang="less">
page {
	background: #fff;
}

.list {
	margin-top: 60px;

	.item {
		margin: 12rpx 0;
		border-bottom: 1px solid #f6f7fb;
		padding: 32rpx;
		font-size: 30rpx;
	}
}
.SelectView {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1px solid #f6f7fb;
	border-top: 1px solid #f6f7fb;
	position: fixed;
	width: 100%;
	flex: 1;
	.SelectItem {
		width: 50%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: center;
	}
}
</style>
